import Sty from "../../style/square/search.module.css";
import { NavBar,Dropdown,Image } from "antd-mobile"
import { useHistory } from "react-router";

import { ArrowDownCircleOutline, DownOutline } from 'antd-mobile-icons'
import { useState } from "react";

export default () => {
  let history=useHistory()
  const [searchList, setSearchList] = useState([
    { id: 1, img_src: require("../../images/pb.png").default, title: '卡通文具盒', price: 23, collection: 2, nickName: '用户名', nickAttr: require("../../images/20211220102552.jpg").default, fans: 123, follow: 123 },
    { id: 2, img_src: require("../../images/pb.png").default, title: '卡通文具盒', price: 23, collection: 2, nickName: '用户名', nickAttr: require("../../images/20211220102552.jpg").default, fans: 123, follow: 123 },
    { id: 3, img_src: require("../../images/pb.png").default, title: '卡通文具盒', price: 23, collection: 2, nickName: '用户名', nickAttr: require("../../images/20211220102552.jpg").default, fans: 123, follow: 123 },
      {id:4,img_src:require("../../images/pb.png").default,title:'卡通文具盒',price:23,collection:2,nickName:'用户名',nickAttr:require("../../images/20211220102552.jpg").default,fans:123,follow:123}
  ])
  const searchListMap = () => {
    return searchList.map((item, index) => {
      return <li className={Sty.search_li} key={item.id}>
        <div className={Sty.search_li_img}>
          <img src={ item.img_src} alt=""/>
        </div>
        <div className={Sty.search_title}>
          <h2>{ item.title}</h2>
        </div>
        <div className={Sty.price_box}>
          <p className={Sty.price}> <span>￥</span>{ item.price}</p>
          <div className={Sty.collection}>已有{ item.collection}人收藏</div>
        </div>

        <div className={Sty.search_li_user}>
          <div className={Sty.search_user_l}>
            <Image
            src={item.nickAttr}
            width={32}
            height={32}
            fit='cover'
            style={{ borderRadius: 16 }}
          />
          </div>
          <div className={Sty.search_user_r}>
            <p>{item.nickName}</p>
            <div><span>粉丝:&nbsp;&nbsp;{ item.fans}</span><span>关注:&nbsp;&nbsp;{ item.follow}</span></div>
          </div>

        </div>
      </li>
    })
  }
   const right = (
    <div style={{ fontSize: 12}}>
     搜索
    </div>
  )
   const back = () =>history.goBack()
  return <>
    <div className={Sty.top}>
    <NavBar right={right} onBack={back}>
        <input type="text" className={Sty.search_input} placeholder="搜索你想要的商品"/>
        </NavBar>
    </div>
    <div className={Sty.filter}>
       <Dropdown   arrow={<ArrowDownCircleOutline />}>
          <Dropdown.Item key='sorter' title='发布时间'>
           
          </Dropdown.Item>
          <Dropdown.Item
            key='bizop'
            title='产品价格'
            arrow={<ArrowDownCircleOutline />}
          >
          </Dropdown.Item>
          <Dropdown.Item key='more' title='收藏量'   arrow={<ArrowDownCircleOutline />}>
          
        </Dropdown.Item>
        <Dropdown.Item key='common' title='评论量'   arrow={<ArrowDownCircleOutline />}>
            
          </Dropdown.Item>
        </Dropdown>
    </div>
    {/* 搜索列表 */}
    <div className={Sty.search_list}>
      <ul>
        {searchList.length>0?searchListMap():[]}
      </ul>

    </div>
  </>
}